<template>
  <el-form
      :inline="true"
      :model="dataForm"
      :rules="dataRule"
      ref="form"
  >
    <!-- 关键词输入框 -->
    <el-form-item prop="keyword">
      <el-input
          v-model="dataForm.keyword"
          placeholder="套餐名称/姓名/电话"
          size="medium"
          class="keyword"
          clearable
      />
    </el-form-item>

    <!-- 日期选择器 -->
    <el-form-item class="date" prop="date">
      <el-date-picker
          v-model="dataForm.date"
          type="date"
          placeholder="选择日期"
          :editable="false"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
      />
    </el-form-item>

    <!-- 查询按钮 -->
    <el-form-item>
      <el-button
          size="medium"
          type="primary"
          icon="el-icon-search"
          @click="searchHandle"
      >
        查询
      </el-button>
    </el-form-item>

    <!-- 状态选择 -->
    <el-form-item class="mold">
      <el-radio-group v-model="dataForm.statusLabel" size="medium" @change="searchHandle">
        <el-radio-button label="全部"></el-radio-button>
        <el-radio-button label="已结束"></el-radio-button>
      </el-radio-group>
    </el-form-item>
  </el-form>

  <!-- 表格 -->
  <div class="table-container" v-show="!empty">
    <el-table
        :data="data.dataList"
        class="appointment-table"
        border
        :header-cell-style="{ background: '#f5f7fa' }"
        v-loading="data.loading"
    >
      <!-- 序号列 -->
      <el-table-column
          type="index"
          header-align="center"
          align="center"
          width="120"
          label="序号"
          fixed
      >
        <template #default="scope">
          <span>{{ (data.pageIndex - 1) * data.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <!-- 套餐名称列 -->
      <el-table-column
          prop="goodsTitle"
          header-align="center"
          align="center"
          label="套餐名称"
          min-width="250"
          fixed
      />

      <!-- 体检人列 -->
      <el-table-column
          prop="name"
          header-align="center"
          align="center"
          label="体检人"
          min-width="120"
      />

      <!-- 预约日期列 -->
      <el-table-column
          prop="date"
          header-align="center"
          align="center"
          label="预约日期"
          min-width="120"
      />

      <!-- 状态列 -->
      <el-table-column
          prop="status"
          header-align="center"
          align="center"
          label="状态"
          min-width="120"
      />

      <!-- 操作列 -->
      <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="158"
          label="操作"
      >
        <template #default="scope">
          <el-button
              type="text"
              :disabled="!scope.row.filePath || data.loading"
              @click="downloadHandle(scope.row.name, scope.row.filePath)"
          >
            体检报告
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="data.pageIndex"
        :page-size="data.pageSize"
        :page-sizes="[10, 20, 50]"
        :total="data.totalCount"
        layout="total, sizes, prev, pager, next, jumper"
    />
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance, reactive, ref} from "vue";

const {proxy} = getCurrentInstance();

// 表单数据和状态
let empty = ref(false);
const dataForm = reactive({
  keyword: "", // 默认值为空字符串
  date: "", // 默认日期为空
  statusLabel: "全部", // 默认状态
});

const dataRule = reactive({
  keyword: [
    {
      required: false,
      pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]{1,30}$/, // 只允许中英文或数字，1到30个字符
      message: "关键字格式不正确，请输入1-30个字符的中英文或数字",
    },
  ],
  date: [
    {
      required: true,
      message: "请选择日期",
      trigger: "change",
    },
  ],
});

// 数据存储和分页
const data = reactive({
  dataList: [],
  pageIndex: 1,
  pageSize: 10,
  totalCount: 0,
  loading: false,
});

// 查询处理函数
const searchHandle = () => {
  // 这里可以根据表单数据执行查询操作
  data.loading = true;
  // 假设这里调用了某个 API 获取数据
  // 例如：fetchData(dataForm).then(response => {
  //   data.dataList = response.data;
  //   data.totalCount = response.total;
  //   data.loading = false;
  // });
};

// 分页相关函数
const sizeChangeHandle = (newSize: number) => {
  data.pageSize = newSize;
  searchHandle(); // 更新分页并重新查询
};

const currentChangeHandle = (newPage: number) => {
  data.pageIndex = newPage;
  searchHandle(); // 更新页码并重新查询
};

// 下载处理函数
const downloadHandle = (name: string, filePath: string) => {
  // 执行下载逻辑
  console.log(`Downloading ${name}'s report from ${filePath}`);
};

function loadDataList() {
  data.loading = true;  // 修正loading属性的赋值
  if (dataForm.statusLabel == '全部') {
    // 如果有statusLabel，检查status是否为空
    if (dataForm.status == null) {
      dataForm.status = null; // 如果status为空，不继续执行后续逻辑
    }
  } else {
    // 如果没有statusLabel，设置status为4
    dataForm.status = 4;
  }

  let json = {
    page: data.pageIndex,
    length: data.pageSize,
    keyword: dataForm.keyword,
    date: dataForm.date,
    status: dataForm.status
  };

  // 调用HTTP请求
  proxy.$http('/front/appointment/searchByPage', 'POST', json, true, function (resp) {
    if (resp && resp.result) {
      let statusEnum = {
        "1": "未签到",
        "2": "已签到",
        "3": "已结束",
        "4": "已关闭",
      };
      let page = resp.page;
      let list = page.list;
      for (let one of list) {
        one.status = statusEnum[one.status + ""];
        if (one.filePath != null) {
          one.filePath = `${proxy.$minioUrl}/${one.filePath}`
        }
      }
      data.dataList = list;
      data.totalCount = page.totalCount;
      data.loading = false;
      empty = list.length == 0;
    } else {
      console.error("查询失败:", resp);
    }
  });
}
function searchHandle() {
  proxy.$refs['form'].validate(valid => {
    if (valid) {
      proxy.$refs['form'].clearValidate(); // 清除表单验证
      if (dataForm.keyword === '') {
        dataForm.keyword = null; // 如果关键字为空，设置为null
      }
      if (dataForm.date === '') {
        dataForm.date = null; // 如果日期为空，设置为null
      }
      if (dataForm.status === '') {
        dataForm.status = null; // 如果状态为空，设置为null
      }
      loadDataList(); // 调用加载数据的函数
    } else {
      return false; // 如果表单验证失败，返回false
    }
  });
}


loadDataList();
</script>

<style scoped lang="less">
@import "appointment_list";
</style>
